<template>
  <div class="dashboard-container">
    <div class="app-container">
      <page-tools>
        <template #before>
          共{{ page.total }}条数据
        </template>
        <template #after>
          <el-button type="danger" size="small" @click="OnExel">员工导出</el-button>
          <el-button type="success" size="small" @click="$router.push('/import')">员工导入</el-button>
          <el-button type="primary" size="small" @click="showAddEmpDialog = true">新增员工</el-button>
        </template>
      </page-tools>
      <!--  -->
      <el-card>
        <el-table
          :data="list"
          :border="true"
          :stripe="true"
          style="width: 100%;"
        >
          <el-table-column
            label="序号"
            type="index"
            :sortable="true"
            width="50"
          ></el-table-column>
          <el-table-column label="姓名" prop="username" :sortable="true"></el-table-column>
          <el-table-column
            label="头像"
            prop="staffPhoto"
            :sortable="true"
            width="130"
          >
            <template v-slot="{row}">
              <img
                v-imgerror="require('@/assets/common/head.jpg')"
                :src="row.staffPhoto"
                style="border-radius: 50%;width: 100px;height: 100px;padding: 10px;"
                @click="onshowQrDialog(row.staffPhoto)"
              >
            </template>
          </el-table-column>
          <el-table-column
            label="手机号"
            prop="mobile"
            width="130"
            :sortable="true"
          ></el-table-column>
          <el-table-column
            label="工号"
            prop="workNumber"
            :sortable="true"
          ></el-table-column>
          <el-table-column label="聘用形式" width="130" prop="formOfEmployment" :sortable="true">
            <template v-slot="{row}">
              {{ row.formOfEmployment | formatHireType }}
            </template>
          </el-table-column>
          <el-table-column
            label="部门"
            prop="departmentName"
            :sortable="true"
          ></el-table-column>
          <el-table-column
            label="入职时间"
            prop="timeOfEntry"
            :sortable="true"
            width="130"
          >
            <template v-slot="{row}">
              {{ row.timeOfEntry | formatTime }}
            </template>
          </el-table-column>
          <el-table-column
            label="状态"
            prop="enableState"
            :sortable="true"
          >
            <template v-slot="{row}">
              <el-switch
                v-model="row.enableState"
                disabled
                :active-value="1"
                :inactive-value="0"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" :sortable="true" width="260" fixed="right">
            <template slot-scope="{row}">
              <el-button type="text" @click="$router.push('/employees/detail/'+row.id+'?username=zs&age=100')">查看</el-button>
              <el-button type="text">转正</el-button>
              <el-button type="text">调岗</el-button>
              <el-button type="text">离职</el-button>
              <el-button type="text" @click="onShowAssignRoleDialog(row.id)">角色</el-button>
              <el-button type="text">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="end" style="margin-top:15px">
          <el-pagination
            layout="prev, pager, next"
            :total="page.total"
            :page-size="page.size"
            @current-change="onCurrentChange"
          >
          </el-pagination></el-row>
      </el-card>
    </div>
    <el-dialog
      title="头像预览"
      :visible.sync="showQrDialog"
      width="50%"
    >
      <el-row type="flex" justify="center">
        <Qrcodevue :value="staffPhoto" :size="250" level="H"></Qrcodevue>
      </el-row>
    </el-dialog>
    <!-- 放置新增组件 -->
    <add-emp :show-dialog.sync="showAddEmpDialog" @success="getEmployeeList"></add-emp>
    <el-dialog
      title="分配角色"
      :visible.sync="ShowAssignRoleDialog"
      width="50%"
    >
      <!-- 复选框 -->
      <el-checkbox-group v-model="roleIds">
        <el-checkbox v-for="(item,index) in roleList" :key="index" :label="item.id">{{ item.name }}</el-checkbox>
      </el-checkbox-group>
      <!-- 取消 确定-->
      <el-row slot="footer" type="flex" justify="center">
        <el-button size="samll" @click="ShowAssignRoleDialog=false">取消</el-button>
        <el-button type="primary" size="samll" @click="assignRole">确定</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { getEmployeeList, assignRoles } from '@/api/employees.js'
import Qrcodevue from 'qrcode.vue'
import AddEmp from './components/add-emp.vue'
import { pick } from 'lodash'
import { formatTime } from '../../utils'
import { formatHireType } from '../../filters'
import { getRoles } from '../../api/setting'
import { getEmployeeBaseInfo } from '../../api/user'
export default {
  name: '',
  components: {
    Qrcodevue,
    AddEmp
  },

  props: {},
  data() {
    return {
      currentId: undefined, // 当前用户的id
      roleIds: [], // 选中的角色id
      roleList: [], // 候选的角色列表
      ShowAssignRoleDialog: false, // 角色对话框
      showQrDialog: false,
      showAddEmpDialog: false,
      staffPhoto: '',
      list: [],
      page: {
        page: 1,
        size: 5,
        total: 0
      }
    }
  },
  created() {
    this.getEmployeeList()
  },
  mounted() {},
  methods: {
    // 角色
    async onShowAssignRoleDialog(id) {
      this.currentId = id
      // 打开对话框显示
      const { rows } = await getRoles({ page: 1, pagesize: 50 })
      this.roleList = rows
      const { roleIds } = await getEmployeeBaseInfo(id)
      this.roleIds = roleIds
      this.ShowAssignRoleDialog = true
    },
    // 角色弹框确定
    async assignRole() {
      // 给用户分配角色
      await assignRoles({
        id: this.currentId,
        roleIds: this.roleIds
      })
      this.$message.success('操作成功')
      this.ShowAssignRoleDialog = false
    },
    OnExel() {
      import('@/vendor/Export2Excel').then(async excel => {
        // 获取所有数据
        const { rows } = await getEmployeeList({ page: 1, size: this.page.total })
        console.log('rows', rows)
        // 表头对应关系
        const headers = {
          '姓名': 'username',
          '手机号': 'mobile',
          '入职日期': 'timeOfEntry',
          '聘用形式': 'formOfEmployment',
          '转正日期': 'correctionTime',
          '工号': 'workNumber',
          '部门': 'departmentName'
        }
        const data = rows.map(t => {
          const item = pick(t, Object.values(headers))
          item.timeOfEntry = formatTime(item.timeOfEntry)
          item.correctionTime = item.correctionTime ? formatTime(item.correctionTime) : ''
          item.formOfEmployment = formatHireType(item.formOfEmployment)
          return Object.values(item)
        })
        excel.export_json_to_excel({
          header: Object.keys(headers), // 表头 必填
          data, // 具体数据 必填
          filename: 'excel-list', // 非必填
          autoWidth: true, // 非必填
          bookType: 'xlsx' // 非必填
        })
      })
    },
    onshowQrDialog(staffPhoto) {
      if (!staffPhoto) {
        staffPhoto = require('@/assets/common/head.jpg')
      }
      this.staffPhoto = staffPhoto
      this.showQrDialog = true
    },
    async getEmployeeList() {
      const { rows, total } = await getEmployeeList(this.page)
      this.list = rows
      this.page.total = total
    },
    onCurrentChange(val) {
      this.page.page = val
      this.getEmployeeList()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
